<% include ../nav.ejs%>
    <script src="/plugins/emojionearea/dist/emojionearea.js" type="text/javascript"></script>
    <link href="/plugins/emojionearea/demo/stylesheet.css" media="screen" />
    <link href="/plugins/emojionearea/dist/emojionearea.min.css" media="screen" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function() {
            $("#example1").emojioneArea({
                autoHideFilters: true
            });
        });
    </script>

    <!-- 用户名模态框（Modal） -->
    <div class="modal fade" id="nicknameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <!--button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  &times;>
                    </button-->
                    <h4 class="modal-title" id="myModalLabel">
               请输入一个用户名
            </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="nickname">Name</label>
                        <input type="text" class="form-control" id="nickname" placeholder="用户名">
                    </div>
                    <!--button type="submit" class="btn btn-default">Send invitation</button-->
                </div>
                <div class="modal-footer">
                    <!--button type="button" class="btn btn-default" data-dismiss="modal">关闭
            </button-->
                    <button type="button" class="btn btn-primary" id="addNickname">
               确定
            </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>


    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="container" style="margin-top:100px">
        <span>当前在线</span>
        <span id="onlineCount"></span>
        <span>人</span>
        <div class="panel panel-primary" id="content"></div>
        <div style="margin:1px">
            <input id="colorStyle" title="font color" type="color" class="btn btn-default btn-xs" />
            <!--form class="form-signin" role="form" method="post" enctype='multipart/form-data'>
                <input id="fulAvatar" name="fulAvatar" type="file" class="form-control" />
                <button id="btnSub" class="btn btn-lg btn-primary" type="submit">上传</button>
            </form-->
            <!--input id="select Image" onclick="alert('该功能还没有完成')" title="image" type="button" value="image" class="btn btn-default btn-xs" /-->
            <input id="clearBtn" title="clear screen" type="button" value="clear" class="btn btn-default btn-xs" />
        </div>
        <form>
            <div class="row">
                <div class="col-md-10">
                    <section class="main-content">
                        <div id="events-panels">
                            <div class="source-panel">
                                <textarea id="example1" style="display:none"></textarea>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary btn-block" id="submit" style="height:112px" type="button">发送</button>
                </div>
            </div>
        </form>
        <%include ../footer.html%>
            <!--<script src="http://cdn.socket.io/socket.io-1.4.5.js"></script>-->
            <script src="/socket.io/socket.io.js"></script>
            <script src="/javascripts/chat_client.js"></script>
    </div>